<template>
  <div class="fileList" v-for="item in data.fileList">
    <img :src="item.url" :key="item.name">
    <div class="box">
      <div class="operate">
        <el-icon @click="handlePreview(item)">
          <ZoomIn/>
        </el-icon>
        <el-icon @click="handleRemove(item)">
          <Delete/>
        </el-icon>
      </div>
    </div>
  </div>
  <el-upload
      :class="{disUploadSty: props.limit === data.fileList.length}"
      :action="props.action"
      :headers="props.headers"
      :multiple="props.multiple"
      :name="props.name"
      :show-file-list="props.showFileList"
      :drag="props.drag"
      :limit="props.limit"
      :disabled="props.disabled"
      :list-type="props.listType"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      :on-change="onChange"
      :on-success="onSuccess"

  >
    <slot name="uploadIcon">
      <el-icon>
        <Plus/>
      </el-icon>
    </slot>
  </el-upload>
  <el-dialog v-model="dialogVisible" width="30%">
    <img :src="dialogImageUrl" alt="" style="width: 100%;">
  </el-dialog>
</template>
<script lang="ts">
const token = localStorage.Token;
</script>
<script lang="ts" setup>
import {reactive, ref, inject, watch} from 'vue'
import {Plus} from '@element-plus/icons-vue'

let $message: any = inject('$message')
let $messageBox: any = inject('$messageBox')

let imgUrl = 'https://ykzuishuai.oss-cn-hangzhou.aliyuncs.com/bike/'

const props = defineProps({
  action: {
    type: String,
    default: `${window.location.origin}/api/common/uploadImg`
  },
  headers: {
    type: Object,
    default() {
      return {
        authorization: 'Bearer ' + token
      }
    }
  },
  multiple: {
    type: Boolean,
    default: true
  },
  name: {
    type: String,
    default: 'file'
  },
  showFileList: {
    type: Boolean,
    default: false
  },
  drag: {
    type: Boolean,
    default: true
  },
  limit: {
    type: Number,
    default: 5
  },
  disabled: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: String
  },
  listType: {
    type: String,
    default: 'picture-card'
  }
})

const dialogImageUrl = ref<string>('')
const dialogVisible = ref<boolean>(false)
let data = reactive({
  fileList: []
})
const $emit = defineEmits(['update:modelValue'])

const handleRemove = (uploadFile) => {
  $messageBox.confirm(
      `确定删除此图片吗吗？`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    data.fileList = data.fileList.filter((item) => {
      return item.uid !== uploadFile.uid
    })
    $emit('update:modelValue', data.fileList.map(item => item.name).join((',')))
  })
}

const handlePreview = uploadFile => {
  console.log(uploadFile);
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}

const beforeUpload = (file: any) => {
  console.log(file)
}

const onChange = (file: any, fileList: any[]) => {
  console.log(file, fileList)
}

const onSuccess = (res) => {
  if (res.status === 0) {
    data.fileList.push({
      name: res.data.name,
      url: res.data.url,
      uid: Math.random().toString().slice(3)
    })
    $message.success(res.msg)
    $emit('update:modelValue', data.fileList.map(item => item.name).join((',')))
  } else {
    $message.error(res.msg)
  }

}

watch(() => props.modelValue, () => {
  data.fileList = []
  props.modelValue && props.modelValue.split(',').forEach(item => {
    data.fileList.push({
      name: item,
      url: `${imgUrl}${item}`,
      uid: Math.random().toString().slice(3)
    })
  })
})

</script>
<style scoped lang="scss">
.fileList {
  position: relative;
  margin-right: 10px;
  width: 146px;
  height: 146px;
  border-radius: 5px;

  .box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    transition: all .1s linear;

    .operate {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      .el-icon {
        font-size: 20px;
        color: #fff;
        margin-right: 5px;
      }
    }
  }

  &:hover {
    .box {
      opacity: 1;
    }
  }

  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.el-upload--picture-card i {
  font-size: 70px;
}

:deep(.el-upload-dragger) {
  background-color: transparent;
  border: none;
}

.disUploadSty {
  :deep(.el-upload--picture-card) {
    display: none;
  }
}
</style>
